<template>
	<view class="circle-detail">
		<h5_header>文章详情</h5_header>
		<view class="detail">
			<view class="text">
				<view class="title c_333 fs_26 ellipsis">
					<span class="c_333 fw_600">【{{data.category}}】 </span>{{data.title}}
				</view>
				<view class="author fs_20 c_999">
					<p class="ellipsis">文章来源：<span>{{data.source}}</span></p>
					<p>发表时间：<span>{{data.createdDate}}</span></p>
				</view>
				<view class="shop-detail" v-html="data.content"></view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<h5_share ref="setOpt"></h5_share>
		<!-- #endif -->
	</view>
</template>

<script>
	// import "@/styles/img.css"
	import {
		getNewsDetails
	} from '@/api/circle/index.js'
	import h5_share from '@/components/h5_share.vue'
	import h5_header from '@/components/h5_header.vue'
	export default {
		components: {
			h5_share,
			h5_header
		},
		data() {
			return {
				data: '',
			}
		},
		onLoad(option) {
			this.getDetail(option.id)
		},
		methods: {
			async getDetail(id) {
				let res = await getNewsDetails({
					newsId: id
				})
				if (res.code == 0) {
					this.data = res.data
					// #ifdef H5
					this.$refs.setOpt.setShareOpt({
						title: this.data.title,
						desc: this.data.text,
						img: this.data.newsCover
					})
					// #endif
					this.data.createdDate = this.formatTime(this.data.createdDate)
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
			},
			formatTime(time) {
				return time.split(' ')[0].replace(/-/g, '.')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.circle-detail {
		height: 100%;
		width: 100%;
		background-color: #F4F4F4;

		.detail {
			background-color: #F4F4F4;
			padding: 10upx;

			.text {
				padding: 10upx;
				background-color: #fff;
				border-radius: 8upx;

				.title {
					height: 64upx;
					line-height: 64upx;
					border-bottom: 1upx solid #EEEEEE;
					text-align: center;
					width: 80%;
					margin: 0 auto;
				}

				.author {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 50upx;
					height: 64upx;
					width: 100%;

					p {
						flex: 1;

						span {
							margin-right: 10upx;
						}
					}
				}
			}
		}
	}
</style>
